<template>
  <div id="header">
    <div class="cui-nav-bar">
      <div class="nav-bar-cont">
        <div class="slogan">让旅行更幸福</div>
        <ul class="language">
          <li>
            <a rel="nofollow" style="cursor: default" class="selected" onmouseover="this.className='selected language_current';this.nextElementSibling.style.display='block';" onmouseout="this.className= 'selected';this.nextElementSibling.style.display='none';"><span><em class="ico-global"></em> Language
                <b class="n-arrow"></b></span></a>
            <div class="language_wrap drowndrop" style="display: none" onmouseover="this.style.display='block';this.previousElementSibling.className='selected language_current';" onmouseout="this.style.display='none';this.previousElementSibling.className='selected';">
              <ul class="language_list" id="cui_lang_list">
                <li>
                  <a id="ctrip_cn" class="language_big5" href="javascript:;">简体中文</a>
                </li>
                <li>
                  <a id="ctrip_eng" class="language_en" href="javascript:;">English (United States)</a>
                </li>
                <li>
                  <a id="ctrip_uk" class="language_gb" href="javascript:;">English (United Kingdom)</a>
                </li>
                <li>
                  <a id="ctrip_hk" class="language_hk" href="javascript:;">繁體中文 (中國香港)</a>
                </li>
                <li>
                  <a id="ctrip_hk_en" class="language_hk" href="javascript:;">English(Hong Konghina)</a>
                </li>
                <li>
                  <a id="ctrip_korea" class="language_korea" href="javascript:;">韩语版</a>
                </li>
                <li>
                  <a id="ctrip_jap" class="language_jap" href="javascript:;">日语版</a>
                </li>
                <li>
                  <a id="ctrip_sg" class="language_sg" href="javascript:;">English (Singapore)</a>
                </li>
                <li>
                  <a id="ctrip_au" class="language_au" href="javascript:;">English (Australia)</a>
                </li>
                <li>
                  <a id="ctrip_de" class="language_de" href="javascript:;">Deutsch</a>
                </li>
                <li>
                  <a id="ctrip_fr" class="language_fr" href="javascript:;">Français</a>
                </li>
                <li>
                  <a id="ctrip_es" class="language_es" href="javascript:;">Español</a>
                </li>
                <li>
                  <a id="ctrip_it" class="language_it" href="javascript:;">Italiano</a>
                </li>
                <li>
                  <a id="ctrip_ru" class="language_ru" href="javascript:;">Русский</a>
                </li>
                <li>
                  <a id="ctrip_th" class="language_th" href="javascript:;">泰国站</a>
                </li>
                <li>
                  <a id="ctrip_id" class="language_id" href="javascript:;">Bahasa Indonesia</a>
                </li>
                <li>
                  <a id="ctrip_my" class="language_my" href="javascript:;">Bahasa Malaysia</a>
                </li>
                <li>
                  <a id="ctrip_my_en" class="language_my" href="javascript:;">English (Malaysia)</a>
                </li>
                <li>
                  <a id="ctrip_vn" class="language_vn" href="javascript:;">越南语</a>
                </li>
                <li>
                  <a id="ctrip_nl" class="language_nl" href="javascript:;">荷兰语</a>
                </li>
                <li>
                  <a id="ctrip_pl" class="language_pl" href="javascript:;">波兰语&gt;</a>
                </li>
                <li>
                  <a id="ctrip_gr" class="language_gr" href="javascript:;">希腊语</a>
                </li>
                <li>
                  <a id="ctrip_tr" class="language_tr" href="javascript:;">土耳其语</a>
                </li>
                <li>
                  <a id="ctrip_pt" class="language_pt" href="https://br.trip.com/?locale=pt_BR">巴西葡萄牙语</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <a class="assist" tabindex="0"><em class="ico-assist"></em>网站无障碍</a>
        <ul class="nav-bar-set">
          <li class="set-list set-logIn" id="nav-bar-set-login" style="display: block" v-if="istrue==0">
            <router-link class="person-text" id="nav-bar-set-login-person-text" style="cursor: pointer" to="/login"><span class="set-text"><span class="member-name" name="nav-bar-mname">您好</span>，请登录
              </span></router-link>
          </li>
          <li class="set-list" id="nav-bar-set-reg" style="display: block" v-if="istrue==0">
            <router-link class="person-text nav-per" to="/register"><span class="set-text"> 免费注册 </span></router-link>
          </li>
          <li class="set-list myctrip-name" v-if="istrue==1" id="nav-bar-set-myctrip-name" style="display: block;" @mouseenter="enter" @mouseleave="leave">
            <a href="javaScript:;" class="person-text nav-myctrip"><span class="set-text"><span class="member-name" name="nav-bar-d-info">尊敬的会员 </span><i class="iconfont icon-arrow" :class="{'rotate':show==true}"></i></span></a>
            <ul class="per-drowndrop" :class="{'block':show==true}" id="nav-bar-set-my-info">
              <li class="my-img">
                <a rel="nofollow" href="javaScript:;"><img name="nav-bar-d-info" src="//dimg04.c-ctrip.com/images/Z80p180000013uw9yF21F.jpg" loaded="T"></a>
              </li>
              <li class="my-data">
                <p class="integral" name="nav-bar-d-info" rel="nofollow" loaded="T">积分：<a href="javaScript:;">0</a>
                </p>
                <p class="member-grade" name="nav-bar-d-info">会员<a href="#" style="display:none;">领福利</a></p>
              </li>
              <li class="sign-out">
                <a rel="nofollow" href="javaScript:;" @click="out">退出</a>
              </li>
            </ul>
          </li>
          <li class="set-list myctrip-name" name="cui-nav-bar-set-list" id="nav-bar-set-myctrip-name" style="display: none">
            <a href="javascript:;" class="person-text nav-myctrip"><span class="set-text"><span class="member-name" name="nav-bar-d-info">普通会员</span><b class="n-arrow"></b></span></a>
            <ul class="per-drowndrop" style="display: none" id="nav-bar-set-my-info">
              <li class="my-img">
                <a rel="nofollow" href="javascript:;"><img name="nav-bar-d-info" src="https://pic.c-ctrip.com/platform/online/home/ico_deafult.png" /></a>
              </li>
              <li class="my-data">
                <p class="integral" name="nav-bar-d-info" rel="nofollow">
                  积分：<a href="javascript:;">0</a>
                </p>
                <p class="member-grade" name="nav-bar-d-info">
                  普通会员<a style="display: none">领福利</a>
                </p>
              </li>
              <li class="sign-out">
                <a rel="nofollow" href="javascript:;">退出</a>
              </li>
            </ul>
          </li>
          <li class="set-list set-infor">
            <i class="infor-notice"></i><a class="infor-num" id="nav-bar-set-msgnum" rel="nofollow" href="javascript:;">消息<span></span></a>
          </li>
          <li class="set-list set-myctrip-list" name="cui-nav-bar-set-list" onmouseover="this.className='set-list set-myctrip-list my_current';this.lastElementChild.style.display='block';" onmouseout="this.className= 'set-list set-myctrip-list';this.lastElementChild.style.display='none';">
            <router-link class="person-text nav-myctrip" to="/mypage/myhome"><span class="set-text"> 我的旅行 <b class="n-arrow"></b></span></router-link>
            <ul class="nav-drowndrop" style="display: none" onmouseover="this.style.display='block';this.parentNode.className='set-list set-myctrip-list my_current';" onmouseout="this.style.display='none';this.parentNode.className='set-list set-myctrip-list';">
              <li>
                <a rel="nofollow" href="javascript:;">我的收藏
                </a>
              </li>
              <li>
                <a rel="nofollow" href="javascript:;">我的优惠券
                </a>
              </li>
              <li>
                <a rel="nofollow" href="javascript:;">常用信息
                </a>
              </li>
              <li>
                <a rel="nofollow" href="javascript:;">我的钱包
                </a>
              </li>
            </ul>
          </li>
          <li class="set-list set-myorder-list" name="cui-nav-bar-set-list" onmouseover="this.className='set-list set-myorder-list my_current';this.lastElementChild.style.display='block';" onmouseout="this.className= 'set-list set-myorder-list';this.lastElementChild.style.display='none';">
            <router-link class="person-text nav-myctrip" rel="nofollow" to="/mypage/myorder"><span class="set-text"> 我的订单 <b class="n-arrow"></b></span></router-link>
            <ul class="nav-drowndrop drowndrop-order" style="display: none" onmouseover="this.style.display='block';this.parentNode.className='set-list set-myorder-list my_current';" onmouseout="this.style.display='none';this.parentNode.className='set-list set-myorder-list';">
              <li>
                <a rel="nofollow" href="javascript:;">机票+相关订单
                </a>
              </li>
              <li>
                <a rel="nofollow" href="javascript:;">酒店订单
                </a>
              </li>
              <li>
                <a rel="nofollow" href="javascript:;">旅游订单
                </a>
              </li>
              <li>
                <a rel="nofollow" href="javascript:;">火车票订单
                </a>
              </li>
              <li>
                <a href="javascript:;">全部订单 </a>
              </li>
              <li>
                <a class="phone-line" href="javascript:;">手机号查订单
                </a>
              </li>
            </ul>
          </li>
          <li class="set-list" style="display: block">
            <a target="_blank" class="person-text nav-per" style="display: block" href="javascript:;"><span class="set-text">客服中心</span></a><a href="javascript:;" class="person-text nav-per" style="display: none"><span class="set-text">在线咨询</span></a>
          </li>
          <li class="set-list" style="display: none">
            <a href="javascript:;" class="person-text nav-per"><span class="set-text">客服中心</span></a>
          </li>
          <li class="set-list set-phone" name="cui-nav-bar-set-list" onmouseover="this.className='set-list set-phone my_current';this.lastElementChild.style.display='block';" onmouseout="this.className= 'set-list set-phone';this.lastElementChild.style.display='none';">
            <a href="#" class="person-text nav-myctrip" title="手机扫码快速下载"><span class="set-text"><i class="ico_app"></i></span></a>
            <ul class="phone-drowndrop" style="display: none" onmouseover="this.style.display='block';this.parentNode.className='set-list set-phone my_current';" onmouseout="this.style.display='none';this.parentNode.className='set-list set-phone';">
              <li class="ico_code">
                <img src="../assets/images/er_ctrip_app.png" alt="手机扫码快速下载" />
                <p>手机扫码快速下载</p>
              </li>
              <li class="ctrip-app">
                <a href="javascript:;" title="旅行手机版">旅行手机版</a><i class="arrow-right"></i>
              </li>
            </ul>
          </li>
          <li class="set-list set-wechat" name="cui-nav-bar-set-list" onmouseover="this.className='set-list set-wechat my_current';this.lastElementChild.style.display='block';" onmouseout="this.className= 'set-list set-wechat';this.lastElementChild.style.display='none';">
            <a href="#" class="person-text nav-myctrip" title="扫一扫 了解爆款旅行好货"><span class="set-text"><i class="ico_wechat"></i></span></a>
            <ul class="wechat-drowndrop" style="display: none" onmouseover="this.style.display='block';this.parentNode.className='set-list set-wechat my_current';" onmouseout="this.style.display='none';this.parentNode.className='set-list set-wechat';">
              <li class="ico_code">
                <img src="../assets/images/er_ctrip_wechat_new.png" alt="扫一扫 了解爆款旅行好货" />
                <p>扫一扫</p>
                <p class="nth2">了解爆款旅行好货</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="cui_hd_cont">
      <div class="cui_hd">
        <div class="ctriplogo">
          <router-link title="旅行网" to="/hotel">旅行网 </router-link>
        </div>
        <div class="nav-tel">
          <ul class="nav-tel-list">
            <li style=""> 境内：95010 </li>
            <li style=""> （或）400-830-6666 </li>
            <li class="tel-list-more" style=""> 中国香港：+852-3008-3295 </li>
            <li class="tel-list-more" style=""> 境外：+86-21-3406-4888 </li>
            <li style="display:none;"> 95010 </li>
            <li style="display:none;">
              <span> 境内：400-612-5926 </span>
            </li>
          </ul>
          <b class="n-arrow" style=""></b>
        </div>
      </div>
    </div>
    <div id="cui_nav" role="navigation" class="">
      <div class="base_nav base_nav_pages">
        <ul id="cui_nav_ul" class="cui_nav cui_content">
          <li id="cui_c_ph_hp" :class="{cui_nav_current: 0 == currentIndex}" @click="changeCurrentIndex(0)" @mouseenter="changeCurrentIndex(0)" @mouseleave="changeCurrentIndex(0)">
            <a id="c_ph_hp" class="cui_nav_non" href="javascript:;">首页</a>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_hotel" :class="{cui_nav_current: 1 == currentIndex}" @click="changeCurrentIndex(1)" @mouseenter="changeCurrentIndex(1)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_hotel" class="cui_nav_has" href="javascript:;">酒店<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_hotel" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_hotel_h">
                  <a id="c_ph_hotel_h" class="cui_sub_current" href="javascript:;">国内酒店</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_hoteli_h">
                  <a id="c_ph_hoteli_h" class="" href="javascript:;">海外酒店</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href="javascript:;"><i class="cui-icon-hotel"></i>酒店订单 &gt;</a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_vac" :class="{cui_nav_current: 2 == currentIndex}" @click="changeCurrentIndex(2)" @mouseenter="changeCurrentIndex(2)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_vac" class="cui_nav_has" href="javascript:;">旅游<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_vac" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_vacations_v">
                  <a id="c_ph_vacations_v" class="" href="javascript:;">旅游首页</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_around_v">
                  <a id="c_ph_around_v" class="" href="javascript:;">周末游</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_vacationsd_v">
                  <a id="c_ph_vacationsd_v" class="" href="javascript:;">跟团游</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_taocan_v">
                  <a id="c_ph_taocan_v" class="" href="javascript:;">自由行</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_sijiatuan">
                  <a id="c_ph_sijiatuan" class="" href="javascript:;">私家团</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_cruise_v">
                  <a id="c_ph_cruise_v" class="" href="javascript:;">邮轮</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_huodong_v">
                  <a id="c_ph_huodong_v" class="" href="javascript:;">门票·活动</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_1daytrip_p">
                  <a id="c_ph_1daytrip_p" class="" href="javascript:;">一日游</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_zhutiyou_v">
                  <a id="c_ph_zhutiyou_v" class="" href="javascript:;">主题游</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_baotuan_v">
                  <a id="c_ph_baotuan_v" class="" href="javascript:;">定制旅行</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_youxue_v">
                  <a id="c_ph_youxue_v" class="" href="javascript:;">游学</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_visa_v">
                  <a id="c_ph_visa_v" class="" href="javascript:;">签证</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_mice_v">
                  <a id="c_ph_mice_v" href="javascript:;">企业会奖</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_hh_v">
                  <a id="c_ph_hh_v" target="_blank" rel="nofollow" class="" href="javascript:;">高端游</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_golf_v">
                  <a id="c_ph_golf_v" class="" href="javascript:;">爱玩户外</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_insurance_v">
                  <a id="c_ph_insurance_v" class="" href="javascript:;">保险</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href="javascript:;"><i class="cui-icon-vacations"></i>旅游订单 &gt;</a>
            </div>
          </li>
          <li class="divider divider_spec"></li>
          <li id="cui_nav_gentuan" :class="{cui_nav_current: 3 == currentIndex}" @click="changeCurrentIndex(3)" @mouseenter="changeCurrentIndex(3)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_gentuan" class="cui_nav_non" dividerclass="divider_spec" href="javascript:;">跟团游</a>
          </li>
          <li class="divider divider_spec"></li>
          <li id="cui_nav_ziyouxing" :class="{cui_nav_current: 4 == currentIndex}" @click="changeCurrentIndex(4)" @mouseenter="changeCurrentIndex(4)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_ziyouxing" class="cui_nav_non" dividerclass="divider_spec" href="javascript:;">自由行</a>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_flight" :class="{cui_nav_current: 5 == currentIndex}" @click="changeCurrentIndex(5)" @mouseenter="changeCurrentIndex(5)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_flight" class="cui_nav_has" href="javascript:;">机票<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_flight" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_flights_f">
                  <a id="c_flights_f" class="" href="javascript:;">国内/国际·中国港澳台机票</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_fuzzy_f">
                  <a id="c_ph_fuzzy_f" class="" href="javascript:;">特价机票</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_flightstoolbox_f">
                  <a id="c_ph_flightstoolbox_f" class="" href="javascript:;">航班动态</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_bookseat_f">
                  <a id="c_ph_bookseat_f" rel="nofollow" class="" href="javascript:;">值机选座</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_flightorderlist_f">
                  <a id="c_ph_flightorderlist_f" rel="nofollow" class="" href="javascript:;">退票改签</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_airportguides_f">
                  <a id="c_ph_airportguides_f" rel="nofollow" class="" href="javascript:;">机场攻略</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_flightdingzhi_f">
                  <a id="c_ph_flightdingzhi_f" class="" href="javascript:;">定制包机</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href="javascript:;"><i class="cui-icon-flight"></i>机票订单 &gt;</a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_trains" :class="{cui_nav_current: 6 == currentIndex}" @click="changeCurrentIndex(6)" @mouseenter="changeCurrentIndex(6)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_trains" class="cui_nav_has" href="javascript:;">火车<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_trains" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_train_t">
                  <a id="c_ph_train_t" class="" href="javascript:;">国内火车票</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_traino_t">
                  <a id="c_ph_traino_t" class="" href="javascript:;">国际/港台火车票</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href="javascript:;"><i class="cui-icon-train"></i>火车票订单 &gt;</a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_destination" :class="{cui_nav_current: 7 == currentIndex}" @click="changeCurrentIndex(7)" @mouseenter="changeCurrentIndex(7)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_destination" class="cui_nav_has" href="javascript:;">汽车 · 船<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_destination" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_bus_t">
                  <a id="c_ph_bus_t" class="" href="javascript:;">汽车票</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_travelBus_t">
                  <a id="c_ph_travelBus_t" class="" href="javascript:;">景区/机场专线</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_ship_t">
                  <a id="c_ph_ship_t" class="" href="javascript:;">船票</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href="javascript:;"><i class="cui-icon-bus"></i>汽车票订单 &gt;</a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_car" :class="{cui_nav_current: 8 == currentIndex}" @click="changeCurrentIndex(8)" @mouseenter="changeCurrentIndex(8)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_car" class="cui_nav_has" href="javascript:;">用车<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_car" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_zj_c">
                  <a id="c_ph_zj_c" class="" href="javascript:;">国内租车</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_hwzj_c">
                  <a id="c_ph_hwzj_c" class="" href="javascript:;">境外租车</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_hwdaijia_c">
                  <a id="c_ph_hwdaijia_c" class="" href="javascript:;">接送机站</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_rizu_c">
                  <a id="c_ph_rizu_c" class="" href="javascript:;">按天包车</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href=" javascript:;"><i class="cui-icon-car"></i> 用车订单 &gt; </a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_ticket" :class="{cui_nav_current: 9 == currentIndex}" @click="changeCurrentIndex(9)" @mouseenter="changeCurrentIndex(9)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_ticket" class="cui_nav_has" href="javascript:;">门票<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_ticket" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_piao_p">
                  <a id="c_ph_piao_p" class="" href="javascript:;">门票·活动</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_wifi_p">
                  <a id="c_ph_wifi_p" class="" href="javascript:;">出境WiFi•电话卡</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_around_p">
                  <a id="c_ph_around_p" class="" href="javascript:;">周末游</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_disney_p">
                  <a id="c_ph_disney_p" class="" href="javascript:;">上海海昌</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" href="javascript:;"><i class="cui-icon-ticket"></i>门票活动订单 &gt;</a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_c_ph_you" :class="{cui_nav_current: 10 == currentIndex}" @click="changeCurrentIndex(10)" @mouseenter="changeCurrentIndex(10)" @mouseleave="changeCurrentIndex(0)">
            <a id="c_ph_you" class="cui_nav_non" href="javascript:;">攻略</a>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_g" :class="{cui_nav_current: 11 == currentIndex}" @click="changeCurrentIndex(11)" @mouseenter="changeCurrentIndex(11)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_g" class="cui_nav_has" href="javascript:;">全球购<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_g" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_mdg_g">
                  <a id="c_ph_mdg_g" class="" href="javascript:;">名店购</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_cshop_g">
                  <a id="c_ph_cshop_g" class="" href="javascript:;">旅游购物商城</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_ylth_g">
                  <a id="c_ph_ylth_g" class="" href="javascript:;">银联特惠</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_forex_g">
                  <a id="c_ph_forex_g" class="" href="javascript:;">外币兑换</a>
                </li>
              </ul>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_lpk" :class="{cui_nav_current: 12 == currentIndex}" @click="changeCurrentIndex(12)" @mouseenter="changeCurrentIndex(12)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_lpk" class="cui_nav_has" href="javascript:;">礼品卡<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_lpk" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_lipin_l">
                  <a id="c_ph_lipin_l" class="" href="javascript:;">礼品卡首页</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_lipinholiday_l">
                  <a id="c_ph_lipinholiday_l" class="" href="javascript:;">节日/主题购卡</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_xcb_l">
                  <a id="c_ph_xcb_l" class="" href="javascript:;">礼品卡福袋</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_lipincorp_l">
                  <a id="c_ph_lipincorp_l" class="" href="javascript:;">企业采购</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_dhq_l">
                  <a id="c_ph_dhq_l" class="" href="javascript:;">兑换券</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_forexlipin_l">
                  <a id="c_ph_forexlipin_l" class="" href="javascript:;">外币兑换</a>
                </li>
              </ul>
              <a class="cui_ico_order" rel="nofollow" style="" href="javascript:;"><i class="cui-icon-card"></i>礼品卡订单 &gt;</a>
            </div>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_sl" :class="{cui_nav_current: 13 == currentIndex}" @click="changeCurrentIndex(13)" @mouseenter="changeCurrentIndex(13)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_sl" class="cui_nav_has" href="javascript:;">商旅<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_sl" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_slsy_s">
                  <a id="c_ph_slsy_s" class="" href="javascript:;">商旅首页</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_chl_s">
                  <a id="c_ph_chl_s" class="" href="javascript:;">企业客户注册</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_hj_s">
                  <a id="c_ph_hj_s" class="" href="javascript:;">会议旅游</a>
                </li>
              </ul>
            </div>
          </li>
          <li class="divider divider_spec"></li>
          <li id="cui_nav_cruise" :class="{cui_nav_current: 14 == currentIndex}" @click="changeCurrentIndex(14)" @mouseenter="changeCurrentIndex(14)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_cruise" class="cui_nav_non" dividerclass="divider_spec" href="javascript:;">邮轮</a>
          </li>
          <li class="divider divider_spec"></li>
          <li id="cui_nav_mudidi" :class="{cui_nav_current: 15 == currentIndex}" @click="changeCurrentIndex(15)" @mouseenter="changeCurrentIndex(15)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_mudidi" class="cui_nav_non" dividerclass="divider_spec" href="javascript:;">目的地</a>
          </li>
          <li class="divider "></li>
          <li id="cui_finance_pc" :class="{cui_nav_current: 16 == currentIndex}" @click="changeCurrentIndex(16)" @mouseenter="changeCurrentIndex(16)" @mouseleave="changeCurrentIndex(0)">
            <a id="finance_pc" class="cui_nav_non" href="javascript:;">金融</a>
          </li>
          <li class="divider "></li>
          <li id="cui_nav_more" :class="{cui_nav_current: 17 == currentIndex}" @click="changeCurrentIndex(17)" @mouseenter="changeCurrentIndex(17)" @mouseleave="changeCurrentIndex(0)">
            <a id="nav_more" class="cui_nav_has" rel="nofollow" href="javascript:;">更多<i class="cui_ico_triangle"></i><span class="point"></span></a>
            <div class="cui_subnav_wrap">
              <ul id="ul_nav_more" class="cui_sub_nav" style="list-style:none">
                <li id="ul_c_ph_ypsc_m">
                  <a id="c_ph_ypsc_m" class="" href="javascript:;">会员商城</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_sjhy_m">
                  <a id="c_ph_sjhy_m" class="" href="javascript:;">超级会员</a>
                </li>
                <li class="divider "></li>
                <li id="ul_c_ph_cards_m">
                  <a id="c_ph_cards_m" rel="nofollow" class="" href="javascript:;">合作卡</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div id="nav_bh" class="cui_nav_behind" style="display:none;height:0px;"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'TopHeader',
  data() {
    return {
      currentIndex: 0,
      user_phone: '',
      show: false
    }
  },
  methods: {
    changeCurrentIndex(i) {
      this.currentIndex = i
    },
    enter() {
      this.show = true
    },
    leave() {
      this.show = false
    },
    isTrue() {
      if (localStorage.getItem('user_phone')) {
        this.$store.commit('LOGINPHONE', 1)
      } else {
        this.$store.commit('LOGINPHONE', 0)
      }
    },
    out() {
      localStorage.removeItem('user_phone')
      localStorage.removeItem('user_password')
      this.isTrue()
      this.$store.dispatch('changeShowNum', { num: 1, phone: '', password: '' })
      this.$router.push('/hotel')
    }
  },
  computed: {
    ...mapState({
      istrue: state => {
        return state.login.istrue
      }
    })
  },
  mounted() {
    this.isTrue()
  }
}
</script>

<style lang="scss" scoped>
.block {
  display: block !important;
}
.rotate {
  transform: rotate(180deg);
}
.icon-arrow {
  font-size: 12px;
}
#header {
  .cui-nav-bar {
    font: 12px/1.5 'Microsoft yahei', arial, Simsun, sans-serif;
    color: #333;
    background: #f4f4f4;
    .ico-global,
    b.n-arrow,
    .set-list.set-infor .infor-notice,
    .set-list.set-phone .person-text span .ico_app,
    .set-list.set-phone .phone-drowndrop .ctrip-app .arrow-right,
    .set-list.set-wechat .person-text span .ico_wechat {
      background-image: url('../assets/images/spirit20190918.png');
      background-repeat: no-repeat;
    }
    a {
      color: #3983e5;
      text-decoration: none;
    }
    img {
      border: none;
      vertical-align: middle;
      display: inline-block;
      width: 100%;
    }
    .nav-bar-cont {
      position: relative;
      z-index: 27;
      min-width: 980px;
      max-width: 1180px;
      height: 36px;
      margin: 0 auto;
    }
    .slogan {
      font-size: 12px;
      color: #666;
      display: inline-block;
      margin: 10px 0 0 14px;
      position: absolute;
      left: -8px;
    }
    ul.language {
      padding: 0;
      position: absolute;
      left: 95px;
      top: 0;
    }
    .language {
      li {
        position: relative;
        z-index: 31;
        .selected {
          display: inline-block;
          margin-top: 0px;
          color: #666;
          font-size: 12px;
          span {
            position: relative;
            z-index: 112;
            display: inline-block;
            padding: 0px 15px 0px 13px;
            *padding: 0px 15px 0px 13px;
            line-height: 35px;
            border: 1px solid transparent;
          }
          &:hover {
            background: #e4e7eb;
            text-decoration: none;
            cursor: pointer;
            color: #666;
            font-size: 12px;
            box-shadow: 0px 6px 8px 0px rgb(0 0 0 / 15%);
            span {
              background-color: #fff;
              border: 1px solid #d9d9d9;
              border-bottom: none;
              margin: 0px;
            }
            b.n-arrow {
              background-position: -46px -72px;
            }
          }
        }
        .ico-global {
          display: inline-block;
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-top: -2px;
          margin-right: 2px;
          *margin-right: 4px;
          background-position: -8px -8px;
        }
      }
      .drowndrop {
        display: none;
        position: absolute;
        z-index: 999;
        top: 35px;
        left: 0;
        background: #fff;
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 15%);
        right: 0;
        width: 613px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
      }
    }
    b.n-arrow {
      display: inline-block;
      width: 8px;
      height: 5px;
      vertical-align: middle;
      margin-left: 2px;
      overflow: hidden;
      background-position: -46px -58px;
    }
    .language_list {
      border: 1px solid #d9d9d9;
      background: #fff;
      padding: 10px;
      margin: 0;
      width: 591px;
      overflow: hidden;
      li {
        float: left;
        display: inline-block;
        width: 183px;
        padding: 5px 7px;
        margin-bottom: 5px;
        a {
          background-image: url('../assets/images/un_header_language_1807.png');
          background-repeat: no-repeat;
          white-space: nowrap;
          display: block;
          padding-left: 26px;
          color: #4c4c4c;
          height: 0;
          padding-top: 20px;
          font-family: Arial, tahoma, verdana, 'Microsoft YaHei', Simsun, sans-serif;
          overflow: hidden;
          line-height: 20px;
        }
        a.language_au,
        a.language_hk,
        a.language_big5,
        a.language_gb,
        a.language_en,
        a.language_es,
        a.language_de,
        a.language_fr,
        a.language_sg,
        a.language_id,
        a.language_my,
        a.language_tw,
        a.language_it {
          font: 12px/20px 'Microsoft yahei', tahoma, arial, sans-serif;
          color: #4c4c4c;
          height: 20px;
          padding-top: 0;
          text-align: left;
        }
        .language_big5,
        .language_big5:hover {
          background-position: 0 0;
        }
        .language_en,
        .language_en:hover {
          background-position: 0 -300px;
        }
        .language_gb,
        .language_gb:hover {
          background-position: 0 -396px;
        }
        .language_hk,
        .language_hk:hover {
          background-position: 0 -25px;
        }
        .language_korea,
        .language_korea:hover {
          background-position: 0 -50px;
        }
        .language_jap,
        .language_jap:hover {
          background-position: 0 -75px;
        }
        .language_sg,
        .language_sg:hover {
          background-position: 0 -100px;
        }
        .language_au,
        .language_au:hover {
          background-position: 0 -322px;
        }
        .language_de,
        .language_de:hover {
          background-position: 0 -125px;
        }
        .language_fr,
        .language_fr:hover {
          background-position: 0 -150px;
        }
        .language_es,
        .language_es:hover {
          background-position: 0 -175px;
        }
        .language_it,
        .language_it:hover {
          background-position: 0 -372px;
        }
        .language_ru,
        .language_ru:hover {
          background-position: 0 -200px;
        }
        .language_th,
        .language_th:hover {
          background-position: 0 -250px;
        }
        .language_id,
        .language_id:hover {
          background-position: 0 -225px;
        }
        .language_my,
        .language_my:hover {
          background-position: 0 -275px;
        }
        .language_my,
        .language_my:hover {
          background-position: 0 -275px;
        }
        .language_vn,
        .language_vn:hover {
          background-position: 0 -420px;
        }
        .language_nl,
        .language_nl:hover {
          background-position: 0 -444px;
        }
        .language_pl,
        .language_pl:hover {
          background-position: 0 -468px;
        }
        .language_gr,
        .language_gr:hover {
          background-position: 0 -492px;
        }
        .language_tr,
        .language_tr:hover {
          background-position: 0 -516px;
        }
        .language_pt,
        .language_pt:hover {
          background-position: 0 -540px;
        }
      }
    }
    .assist {
      position: absolute;
      left: 215px;
      top: 0;
      padding: 0px 15px 0px 13px;
      line-height: 35px;
      color: #666;
      cursor: pointer;
      .ico-assist {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin-right: 2px;
        overflow: hidden;
        background: url('../assets/images/icon-assist.png') no-repeat center center;
      }
      &:hover {
        color: #0086f6;
        .ico-assist {
          background-image: url('../assets/images/icon-assist-hover.png');
        }
      }
    }
    .nav-bar-set {
      position: absolute;
      right: 0;
      top: 0;
      height: 36px;
      .nav-drowndrop {
        position: absolute;
        display: none;
        z-index: 999;
        top: 24px;
        left: -1px;
        background: #fff;
        border: 1px solid #d9d9d9;
        width: 92px;
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 15%);
        &.drowndrop-order {
          width: 116px;
        }
        li a {
          line-height: 30px;
          display: block;
          color: #666;
          margin: 0 16px;
          cursor: pointer;
        }
        li:hover {
          background: #f6f6f6;
          a {
            color: #0066cc;
          }
        }
      }
    }
    .set-list {
      float: left;
      height: 12px;
      line-height: 12px;
      margin: 11px 0 0 0;
      border-right: 1px solid #dddddd;
      position: relative;
      z-index: 31;
      box-sizing: border-box;
    }
    .person-text {
      display: inline-block;
      margin: -12px -1px 0;
      .set-text {
        position: relative;
        z-index: 112;
        display: inline-block;
        padding: 12px 0px;
        *padding: 12px 0px 5px 0;
        width: 92px;
        color: #666;
        text-align: center;
        border: 1px solid transparent;
        border-bottom: none;
      }
      &.nav-per:hover .set-text {
        color: #0066cc;
      }
    }
    .set-logIn.set-list {
      border-right: none;
      .person-text {
        .set-text {
          width: auto;
          color: #0066cc;
          border-right: none;
        }
      }
    }
    .member-name {
      *padding-top: 2px;
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
    .set-list.myctrip-name {
      .person-text {
        .set-text {
          width: auto;
          padding-left: 16px;
          padding-right: 16px;
        }
      }
    }
    .set-list.set-infor {
      padding: 1px 16px 0px;
      *padding: 0px 16px;
      *margin-top: 10px;
      .infor-notice {
        display: inline-block;
        width: 14px;
        height: 12px;
        vertical-align: middle;
        margin-right: 2px;
        overflow: hidden;
        background-position: -8px -66px;
      }
      .infor-num {
        font-size: 12px;
        cursor: pointer;
        color: #666666;
        span {
          color: #ff6600;
          margin-left: 2px;
        }
      }
    }
    .set-list.set-phone {
      height: 12px;
      line-height: 12px;
      margin: 11px 0 0 0;
      border-right: none;
      .person-text .set-text {
        padding: 10px 16px 9px;
        *padding: 10px 16px 10px;
        width: auto;
        .ico_app {
          height: 16px;
          width: 10px;
          display: inline-block;
          overflow: hidden;
          background-position: -100px -67px;
        }
      }
      .phone-drowndrop {
        position: absolute;
        display: none;
        z-index: 10;
        top: 24px;
        right: -1px;
        background: #fff;
        border: 1px solid #d9d9d9;
        width: 144px;
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 15%);
        text-align: center;
        .ico_code {
          padding: 16px 0 13px;
          p {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
          }
        }
        .ctrip-app {
          width: 100%;
          line-height: 36px;
          color: #fff;
          background: #2477e3;
          opacity: 0.5;
          filter: Alpha(opacity=50);
          text-align: center;
          cursor: pointer;
          a {
            color: #fff;
          }
          .arrow-right {
            display: inline-block;
            width: 5px;
            height: 8px;
            margin-left: 4px;
            overflow: hidden;
            vertical-align: middle;
            background-position: -76px -12px;
          }
        }
      }
    }
    .set-list.set-wechat {
      height: 12px;
      line-height: 12px;
      margin: 11px 0 0 0;
      border-right: none;
      .person-text .set-text {
        padding: 10px 16px 7px;
        *padding: 10px 16px 8px;
        width: auto;
        .ico_wechat {
          height: 18px;
          width: 18px;
          display: inline-block;
          overflow: hidden;
          background-position: -97px -99px;
        }
      }
      .wechat-drowndrop {
        position: absolute;
        display: none;
        z-index: 10;
        top: 24px;
        right: -1px;
        background: #fff;
        border: 1px solid #d9d9d9;
        width: 130px;
        box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 15%);
        text-align: center;
        .ico_code {
          padding: 8px;
          p {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
          }
          p.nth2 {
            margin-top: 3px;
            line-height: 16px;
            box-sizing: border-box;
          }
        }
      }
    }
    .my_current .nav-myctrip {
      text-decoration: none;
      cursor: pointer;
      color: #4c4c4c;
      font-size: 12px;
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 15%);
      .set-text {
        background: #fff;
        border: 1px solid #d9d9d9;
        border-bottom: none;
      }
      .n-arrow {
        background-position: -46px -72px;
      }
    }
  }

  .cui_hd_cont {
    background: #fff;
    *zoom: 1;
    .cui_hd {
      font: 12px/1.5 'Microsoft yahei', arial, Simsun, sans-serif;
      color: #333;
      position: relative;
      z-index: 26;
      min-width: 980px;
      max-width: 1180px;
      height: 80px;
      margin: 0 auto;
      a {
        color: #3983e5;
        text-decoration: none;
      }
      .ctriplogo {
        position: absolute;
        left: 0;
        z-index: 10;
        display: inline-block;
        width: 203px;
        height: 34px;
        margin: 23px 0;
        overflow: hidden;
        a {
          display: block;
          width: 100%;
          height: 100%;
          background: url('../assets/images/c_logo2020.png') no-repeat;
          background-size: 100% 100%;
          text-indent: -999px;
          overflow: hidden;
        }
      }
      .nav-tel {
        position: absolute;
        right: 0;
        top: 10px;
        font-family: Arial, tahoma, verdana, 'Microsoft YaHei', Simsun, sans-serif;
        padding: 10px 20px 0px 16px;
        border: 1px solid #fff;
        background: #fff;
        height: 40px;
        overflow: hidden;
        &:hover {
          border: 1px solid #ccc;
          height: auto !important;
          z-index: 99;
          .n-arrow {
            background-position: -46px -72px;
          }
        }
        .n-arrow {
          position: absolute;
          top: 28px;
          right: 9px;
        }
      }
      .nav-tel-list {
        text-align: right;
        color: #666;
        font-size: 12px;
        line-height: 20px;
      }
      b.n-arrow {
        background-image: url('../assets/images/spirit20190918.png');
        background-repeat: no-repeat;
        display: inline-block;
        width: 8px;
        height: 5px;
        vertical-align: middle;
        margin-left: 2px;
        overflow: hidden;
        background-position: -46px -58px;
      }
    }
  }

  a {
    color: #333;
    cursor: pointer;
  }

  #cui_nav {
    font-family: 'microsoft yahei', Arial, sans-serif;
    text-align: left;
    font-size: 12px;
    width: 100%;
    .base_nav {
      width: 100%;
      height: 40px;
      background-color: #2577e3;
      margin: 0 auto 54px;
      .cui_nav {
        position: relative;
        z-index: 25;
        min-width: 980px !important;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        background-color: #2577e3;
        li {
          float: left;
          display: inline-block;
          height: 40px;
          _float: none;
          _display: inline;
          _zoom: 1;
          _vertical-align: top;
          a {
            font-size: 15px;
            transition: all 0.2s ease 0s;
          }
          i.cui_ico_triangle {
            display: inline-block;
            width: 0;
            height: 0;
            overflow: hidden;
            line-height: 0;
            font-size: 0;
            margin-left: 5px;
            vertical-align: middle;
            border-top: 3px solid #fff;
            border-bottom: 0 none;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            _color: #ff3fff;
            _filter: chroma(color=#ff3fff);
            -webkit-transition: transform 0.2s ease 0s;
            transition: transform 0.2s ease 0s;
          }
          a.cui_nav_non {
            position: relative;
            display: block;
            height: 40px;
            padding: 0 11px;
            color: #fff;
            _float: left;
            cursor: pointer;
          }
          .cui_nav_has .point {
            display: none;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -7px;
            width: 0;
            height: 0;
            overflow: hidden;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
            border-bottom: 7px solid #fff;
            border-top: 0 none;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            _color: #ff3fff;
            _filter: chroma(color=#ff3fff);
          }
          a.cui_nav_has {
            position: relative;
            display: block;
            height: 40px;
            padding: 0 11px;
            color: #fff;
            _float: left;
            cursor: pointer;
          }
          &.divider {
            width: 1px;
            height: 14px !important;
            padding-left: 0;
            margin: 13px 0 0;
            background-color: #1d67dd;
            clear: none;
            border: none;
          }
          &.cui_nav_current {
            a.cui_nav_has {
              background: #0a56bb;
              text-decoration: none;
            }
            .cui_ico_triangle {
              display: inline-block;
              width: 0;
              height: 0;
              overflow: hidden;
              line-height: 0;
              font-size: 0;
              margin-left: 5px;
              vertical-align: middle;
              border-bottom: 3px solid #fff;
              border-top: 0 none;
              border-left: 3px solid transparent;
              border-right: 3px solid transparent;
              _color: #ff3fff;
              _filter: chroma(color=#ff3fff);
              -ms-transform: rotate(360deg);
              -o-transform: rotate(360deg);
              transform: rotate(360deg);
            }
            .point {
              display: inline-block;
            }
            .cui_subnav_wrap {
              display: block;
            }
            .cui_sub_nav {
              background: #fff;
            }
          }
          .cui_subnav_wrap {
            display: none;
            white-space: nowrap;
            position: absolute;
            z-index: 8;
            left: 0;
            top: 40px;
            line-height: 40px;
            color: #666;
            width: 100%;
            background-color: #fff;
            .cui_ico_order {
              position: absolute;
              top: 10px;
              right: 18px;
              padding-left: 20px;
              background-position: -67px -542px;
              line-height: 18px;
              font-size: 14px;
              color: #333;
            }
          }
          .cui_nav_current {
            .cui_subnav_wrap {
              display: block;
            }
          }
          &#cui_nav_hotel .cui_sub_nav {
            padding-left: 16px;
          }
          .cui_sub_nav {
            width: auto !important;
            height: 37px;
            line-height: 37px;
            margin: 0;
            border: 1px solid #2577e3;
            border-top: none;
            font-size: 14px;
            li {
              position: relative;
              float: left;
              display: inline-block;
              height: auto;
              margin: 0 8px;
              color: #333;
              font-size: 14px;
              a {
                color: #333;
                font-size: 14px;
              }
              &.divider {
                background-color: #ccc;
                margin: 11px 0 0;
              }
            }
            a.cui_sub_current {
              color: #2577e3;
              text-decoration: none;
              font-size: 14px;
            }
          }
          .cui_sub_nav:before,
          .cui_sub_nav:after {
            content: '\0020';
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
          }
          .cui-icon-flight,
          .cui-icon-hotel,
          .cui-icon-train,
          .cui-icon-bus,
          .cui-icon-boat,
          .cui-icon-car,
          .cui-icon-vacations,
          .cui-icon-ticket,
          .cui-icon-huodong,
          .cui-icon-insurance,
          .cui-icon-HHtravel,
          .cui-icon-wifi,
          .cui-icon-visa,
          .cui-icon-outboundtravel,
          .cui-icon-taocan,
          .cui-icon-card,
          .cui-icon-g,
          .cui-icon-tuan,
          .cui-icon-standby,
          .cui-icon-foreign {
            display: inline-block;
            background-image: url('../assets/images/un_icon_index_type20170111.png');
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-right: 5px;
            margin-top: -1px;
          }
          .cui-icon-hotel {
            background-position: -26px 0;
          }
          .cui-icon-vacations {
            background-position: 0 -26px;
          }
          .cui-icon-flight {
            background-position: 0 0;
          }
          .cui-icon-train {
            background-position: -52px 0;
          }
          .cui-icon-bus {
            background-position: -78px 0;
          }
          .cui-icon-car {
            width: 17px;
            background-position: -130px 0;
          }
          .cui-icon-ticket {
            background-position: -26px -26px;
          }
          .cui-icon-card {
            background-position: -78px -52px;
          }
          &#cui_nav_destination .cui_sub_nav {
            padding-left: 375px;
          }
          &#cui_nav_car .cui_sub_nav {
            padding-left: 353px;
          }
          &#cui_nav_ticket .cui_sub_nav {
            padding-left: 447px;
          }
          &#cui_nav_g .cui_sub_nav {
            padding-left: 607px;
          }
          &#cui_nav_trains .cui_sub_nav {
            padding-left: 337px;
          }
          &#cui_nav_lpk .cui_sub_nav {
            padding-left: 576px;
          }
          &#cui_nav_sl .cui_sub_nav {
            padding-left: 802px;
          }
          &#cui_nav_more .cui_sub_nav {
            padding-left: 960px;
          }
        }
      }
    }
  }
}
.cui-nav-bar {
  .set-list.myctrip-name {
    border-right: none;
  }
  .per-drowndrop {
    position: absolute;
    display: none;
    z-index: 10;
    top: 24px;
    left: -1px;
    background: #fff;
    border: 1px solid #d9d9d9;
    width: 240px;
    box-shadow: 0px 6px 8px 0px rgb(0 0 0 / 15%);
    .my-img {
      float: left;
      a {
        margin: 16px;
        display: block;
      }
      img {
        height: 64px;
        width: 64px;
        border-radius: 100%;
      }
    }
    .my-data {
      float: left;
      margin-top: 30px;
      .integral {
        font-size: 12px;
        color: #666;
        a {
          color: #0066cc;
          line-height: 12px;
          display: inline-block;
          margin: 0;
        }
      }
      .member-grade {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
      }
    }
    .sign-out {
      position: absolute;
      right: 9px;
      top: 9px;
      padding: 3px;
      a {
        color: #666 !important;
      }
    }
  }
}
#header .cui_hd_cont .cui_hd .ctriplogo {
  position: absolute;
  left: 0;
  z-index: 10;
  display: inline-block;
  width: 180px;
  height: 60px;
  margin: 10px 0;
  overflow: hidden;
}
</style>